<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: calc(220px*3);
            margin: 0 auto;
            text-align: center;
        }
        li{
            display: inline-block;
            width: 200px;
            margin: 5px auto;
            border: 1px solid green;
        }
        img{
            width: 180px;
        }
    </style>
</head>
<body>
    <button>点我</button>
    <ul></ul>
    <!-- <ul> -->
        <!-- <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li>
        <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li>
        <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li>
        <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li>
        <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li>
        <li><img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt=""><h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜</h5><p>￥25.00</p></li> -->
    <!-- </ul> -->
</body>
</html>
<script>
    // var arr = [
    //     {title:"苹果",price:"20",img:"./"},
    //     {title:"葡萄",price:"20",img:"./"},
    //     {title:"香蕉",price:"20",img:"./"}]
    // for(var i = 0; i < arr.length ;i++){
    //     console.log(arr[i].title);
        
    // }
    var oBtn = document.querySelector("button")
    var oUl = document.querySelector("ul")
    var arr = [{"goods_id":1,"title":"南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038","img_big_logo":"https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg","price":"25.00","current_price":"17.50","goods_number":24,"is_sale":true,"sale_type":"70%","is_hot":false,"category":"其他"},{"goods_id":2,"title":"南极人 袜子男士 男女士船袜 精梳棉竹纤维棉袜 情侣袜 运动 休闲 商务男袜短袜吸湿排汗透气男袜女袜子P3015K31","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070081143-000000000132291774_2_800x800.jpg","price":"29.00","current_price":"29.00","goods_number":71,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"内衣配饰"},{"goods_id":3,"title":"南极人 【5双礼盒装】男士袜子中筒棉袜四季商务袜透气袜子男P3014","img_big_logo":"https://image4.suning.cn/uimg/b2c/newcatentries/0070081143-000000000131021736_2_800x800.jpg","price":"29.00","current_price":"17.40","goods_number":85,"is_sale":true,"sale_type":"60%","is_hot":true,"category":"内衣配饰"},{"goods_id":4,"title":"Palmer’s 帕玛氏 孕妇 4359-6 产前产后妊娠纹多效玫瑰精华油 150ml 美国直采","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070088060-000000000618581890_1_800x800.jpg","price":"74.00","current_price":"74.00","goods_number":13,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"其他"},{"goods_id":5,"title":"PPTV-32C3 32英寸 1GB+8GB 4核 64位处理器 高清智能网络WIFI平板电视机","img_big_logo":"https://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000657032630_1_800x800.jpg","price":"679.45","current_price":"679.45","goods_number":82,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"大家电"},{"goods_id":6,"title":"浪莎保暖裤 加绒加厚 外穿打底裤高腰踩脚裤 女秋冬大码中厚连裤袜","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070129883-000000000160116107_2_800x800.jpg","price":"19.00","current_price":"13.30","goods_number":41,"is_sale":true,"sale_type":"70%","is_hot":false,"category":"内衣配饰"}]
    oBtn.onclick = function(){
        var str = ''
        for (var i = 0;i<arr.length; i++){
        str += `<li>
            <img src="${arr[i].img_big_logo}" alt="">
            <h5>${arr[i].title}</h5>
            <p>￥${arr[i].price}</p></li>`
    }
        oUl.innerHTML = str
    }
    
    
</script>